import React from 'react'
/* 
函数组件
  函数返回组件界面的虚拟DOM

  1. 必须有返回值.返回的内容就是组件呈现的结构, 如果返回值为 null，表示不渲染任何内容
  2. 会在组件标签渲染时调用, 但不会产生实例对象, 不能有状态（但可以通过hooks语法提供）
  3. 组件名首字母必须大写. 因为react以此来区分自定义组件元素 和 一般元素
  4. 组件内部如果有多个标签,必须使用一个根标签包裹
*/
export default function FunctionApp() {
  console.log('FunctionApp')
  return <div>Function App 组件</div>
}

/* 
类组件
  必须继承于React.Component
  实现render方法, 来返回组件界面的虚拟dom

  1. 类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性
  2. 类组件中必须要声明一个render函数, reander返回组件代表组件界面的虚拟DOM元素
  3. 会在组件标签渲染时调用, 产生实例对象, 可以有状态
  4. 组件名首字母必须大写. 因为react以此来区分自定义组件元素 和 一般元素
  5. 组件内部如果有多个标签,必须使用一个根标签包裹
*/
export class ClassApp extends React.Component {

  render () {
    console.log('ClassApp render')
    return <div><div>class App 组件</div> <span>aaaa</span></div>
  }
}